@layout("/common/_container.html"){
    <style>
        .searchbox{
            margin: 10px;
        }
        .tables{
            margin: 10px;
        }
        .iconbox{
            margin-bottom: 15px;
        }
        .icon{
            color: #6DB0FB;
            font-size: 18px;
            margin-right: 10px;
        }
        .labelself{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .item-del{
            display: flex;
            justify-content: right;
        }
        /* 到期标红 */
        .red{
            color: red;
        }
        /* 递增明细列表 */
        .detailbox{
            display: flex;
        }
        .detail-name{
            margin-right: 5px;
        }
        .pages{
            margin-top: 10px;
        }
        .el-table__empty-block{
            text-align:left !important;
        }
        .waitc{
            color: #F29B36;
        }
        .alreadyc{
            color: #29A6ED;
        }
        .refusec{
            color: #D50E21;
        }
        .pictureall{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .picture-card{
            width: 100px; 
            height: 40px;
            margin-left: 5px;
        }
        .image-slot-card{
            width: 140px; 
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-size: 60px;
        }
        .picture{
            width: 100px; 
            height: 40px
        }
        .image-slot{
            width: 200px; 
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-size: 60px;
        }
    </style>
    </head>
    <body>
        <script src="/assets/common/module/vuejs/vue.dev.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/index.css">
        <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/display.css">
        <link rel="stylesheet" href="/assets/common/css/beautiful.css">
        <!-- 引入组件库 -->
        <script src="/assets/common/module/element-ui/lib-master/index.js"></script>
        <div id="app">
            <div class="searchbox">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item :style="formItemStyle" label="店名/妖码:">
                        <el-input v-model="form.gcdm" size="small" placeholder="请输入店名或妖码进行查询"></el-input>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="营运经理:">
                        <el-select v-model="form.yyjl" filterable \@change="yyjlChange" size="small" placeholder="请选择">
                            <el-option v-for="(item,index) in yyjlOptions" :key="index" :label="item.yyjl"
                                :value="item.yyjl">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="督导:">
                      <el-select v-model="form.dd" filterable size="small" placeholder="请选择">
                          <el-option v-for="(item,index) in supervisorOptions" :key="index" :label="item.dd"
                              :value="item.dd">
                          </el-option>
                      </el-select>
                  </el-form-item>
                    <el-form-item :style="formItemStyle" label="状态:"> 
                        <el-select v-model="form.status" size="small" placeholder="请选择">
                            <el-option v-for="item in statusData" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle">
                        <el-button type="primary" class="btybtn" size="small" \@click="searchDo()">查询</el-button>
                        <el-button size="small" v-on:click="resetDo">重置</el-button>
                        <el-button type="primary" class="btybtn" size="small" v-show="form.status == 1" \@click="pressAll">催办</el-button>
                        <el-button type="primary" class="btybtn" size="small" \@click="exportEx('excel')">导出excel</el-button>
                        <el-button type="primary" class="btybtn" size="small" \@click="exportEx('picture')">导出图片</el-button>
                        <a id="ways" href="/cloudSzsh/sztp.zip" style="display: none;"></a>
                    </el-form-item>
                </el-form>
            </div>
    
            <div class="tables">
                <el-table
                 ref="multipleTable"
                 v-loading="loading"
                 :data="tableData" 
                 size="small" 
                 ref="singleTable"
                 highlight-current-row 
                 :cell-style="{fontSize:'14px'}"
                 :header-cell-style="headerStyle" 
                 \@selection-change="handleSelectionChange"
                 border
                 :height="tableHeight"
                 size="small">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column prop="" label="序号" width="60" fixed="left">
                        <template scope="scope">
                            <span>{{(pageIndex - 1) * pagesize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gcdm" label="工程店名" width="200">
                    </el-table-column>
                    <el-table-column prop="yaoma" label="妖码">
                    </el-table-column>
                    <el-table-column prop="cwm" label="营运经理/电话" width="160">
                        <template scope="scope">
                            {{scope.row.yyjl}}/{{scope.row.yyjlTel}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="yaoma" label="督导/电话" width="160">
                        <template scope="scope">
                            {{scope.row.dd}}/{{scope.row.ddTel}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="frxm" label="法人姓名">
                    </el-table-column>
                    <el-table-column  label="法人身份证正反面" width="300">
                        <template scope="scope">
                            <div class="pictureall">
                                <el-image
                                v-for="item in scope.row.frsfz.split(',')"
                                :src="getImgUrl(item)" 
                                :preview-src-list="[getImgUrl(item)]" 
                                lazy class="picture-card">
                                    <div slot="error" class="image-slot-card">
                                    <i class="el-icon-picture-outline" class="picture"></i>
                                    </div>
                                </el-image>
                            </div>
                            
                        </template>
                    </el-table-column>
                    <el-table-column label="食品经营许可证图片" width="200">
                        <template scope="scope">
                            <el-image
                             :src="getImgUrl(scope.row.foodBusinessLicensePic)" 
                             :preview-src-list="[getImgUrl(scope.row.foodBusinessLicensePic)]" 
                             lazy class="picture">
                                <div slot="error" class="image-slot">
                                  <i class="el-icon-picture-outline" class="picture"></i>
                                </div>
                              </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="foodBusinessLicenseDate" label="食品经营许可证截止日期" width="160">
                    </el-table-column>
                    <el-table-column label="营业执照图片" width="200">
                        <template scope="scope">
                            <el-image
                             :src="getImgUrl(scope.row.businessLicensePic)"
                             :preview-src-list="[getImgUrl(scope.row.businessLicensePic)]" 
                             lazy class="picture">
                                <div slot="error" class="image-slot">
                                  <i class="el-icon-picture-outline" class="picture"></i>
                                </div>
                              </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessLicense" label="营业执照名称" width="150">
                    </el-table-column>
                    <el-table-column prop="socialCreditCode" label="统一社会信用代码" width="150">
                    </el-table-column>
                    <el-table-column prop="businessLicenseAddress" label="营业执照地址" width="100">
                        <template scope="scope">
                            <el-popover
                                placement="top"
                                v-if="scope.row.businessLicenseAddress"
                                popper-class="popper"
                                width="300"
                                trigger="hover">
                                <div>
                                    {{scope.row.businessLicenseAddress}}
                                </div>
                                <div class="hideone" slot="reference">
                                    {{scope.row.businessLicenseAddress}}
                                </div>
                                </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="提交时间" width="100">
                    </el-table-column>
                    <el-table-column prop="operateTime" label="通过/驳回时间" width="100">
                    </el-table-column>
                    <el-table-column prop="startTime" label="状态" width="100" fixed="right">
                        <template scope="scope">
                            <span v-if="scope.row.status==1">未提交</span>
                            <span v-if="scope.row.status==2" class="waitc">待审核</span>
                            <span v-if="scope.row.status==3" class="alreadyc">已通过</span>
                            <span v-if="scope.row.status==4" class="refusec">已驳回</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="performanceStatus" width="200" align="center" label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" class="btybtn" size="small" v-if="scope.row.status==1" \@click="pressOne(scope.row.id)">催办</el-button>
                            <el-button type="primary" class="btybtn" size="small" v-if="scope.row.status==2" \@click="passDo(scope.row.id)">通过</el-button>
                            <el-button type="danger" size="small" v-if="scope.row.status==2" \@click="refuseApply(scope.row.id)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination
                     background 
                     :total="total" 
                     :page-size="pagesize" 
                     v-on:size-change="handleSizeChange"
                     v-on:current-change="handleCurrentChange"
                     :current-page="pageIndex"
                     :page-sizes="[20, 30, 50, 100]"
                     layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
            <el-dialog title="驳回原因"  :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" >
                <el-input v-model="reason" placeholder="请输入驳回原因"></el-input>
                <div slot="footer" class="dialog-footer">
                    <el-button v-on:click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="refuseDo">保 存</el-button>
                </div>
            </el-dialog>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    imgUrl:"https://rs.bantianyaozg.com",
                    formItemStyle: {
                        marginBottom: 0
                    },
                    tableData: [],
                    pageIndex: 1,//当前页码
                    pagesize: 20,//每页数量
                    total: 0,//总条数
                    dialogVisible: false,//添加编辑框是否显示
                    loading: false,//表格是否加载
                    form: {
                        gcdm:'',
                        yyjl:'',//营运经理
                        dd:'',//督导
                        status:2,//状态
                    },
                    statusData:[
                        {
                            name: '全部',
                            value: ''
                        },
                        {
                            name: '未提交',
                            value: 1
                        },
                        {
                            name: '待审核',
                            value: 2
                        },
                        {
                            name: '已通过',
                            value: 3
                        },
                        {
                            name: '已驳回',
                            value: 4
                        },
                    ],//状态选项数据
                    yyjlOptions:[],//营运经理选项数据
                    supervisorOptions:[],//督导选项数据
                    selections:[],//多选内容
                    rejectId:'',//驳回的id
                    reason:'',//驳回原因
                    tableHeight:0,
                    headerStyle:{color:'#0E2231',fontWeight:'blod',background:'#F7F5FA'}
                },
                created() {
                    this.getListData()
                    this.getYyjl()//获取营运经理数据
                    this.getHeight()
                },
                methods: {
                    getHeight(){
                        let ava = document.documentElement.clientHeight
                        let height = ava-113
                        this.tableHeight = height
                    },
                    // 获取营运经理数据
                    getYyjl(){
                        let formData = new FormData()
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyDoubleCard/yyjlList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.yyjlOptions = res
                            })
                    },
                    // 获取督导数据
                    getSupervisor(){
                        const {yyjl} = this.form
                        let formData = new FormData()
                        formData.append("yyjl",yyjl)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyDoubleCard/ddList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.supervisorOptions = res
                            })
                    },
                    // 营运经理改变
                    yyjlChange(val){
                        this.$set(this.form,'dd','')
                        this.getSupervisor()
                    },
                    // 驳回弹出框
                    refuseApply(id){
                        this.rejectId = id
                        this.dialogVisible = true
                    },
                    // 驳回操作
                    refuseDo(){
                        const {reason,rejectId} = this
                        if(!reason){
                            this.$message({
                                type: 'error',
                                message: "请输入驳回原因"
                            });
                            return
                        }
                        let formData = new FormData()
                        formData.append("id", rejectId)
                        formData.append("rejectReason", reason)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyDoubleCard/reject", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                if (res.code === 200) {
                                    this.reason = ""
                                    this.dialogVisible = false
                                    this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    });
                                    this.getListData()
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: res.message
                                    });
                                }
                            })
                    },
                    // 通过操作
                    passDo(id){
                        this.$confirm('确认要通过信息么?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                let formData = new FormData()
                                formData.append("id", id)
                                const requestOptions = {
                                    method: "POST",
                                    body: formData
                                };
                                fetch("/btyDoubleCard/pass", requestOptions)
                                    .then(response => response.json())
                                    .then(res => {
                                        if (res.code === 200) {
                                            this.$message({
                                                type: 'success',
                                                message: '操作成功!'
                                            });
                                            this.getListData()
                                        }else{
                                            this.$message({
                                                type: 'error',
                                                message: res.message
                                            });
                                        }
                                    })
                                
                            }).catch(() => {});
                    },
                    // 搜索内容 overtime是否要查询即将到期合同
                    searchDo(overtime=0) {
                        this.pageIndex = 1
                        this.getListData()
                    },
                    // 获取列表数据
                    getListData() {
                        this.loading = true
                        let form = this.form
                        let { pageIndex, pagesize } = this
                        let keys = Object.keys(form)
                        let formData = new FormData()
                        keys.map(item=>{
                            formData.append(item, form[item])
                            
                        })
                        formData.append("page", pageIndex)
                        formData.append("limit", pagesize)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyDoubleCard/list", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                if (res.code === 0) {
                                    this.total = res.count
                                    this.tableData = res.data
                                    this.loading = false
                                    setTimeout(() => {
                                        this.$nextTick(() => {
                                            this.$refs.singleTable.doLayout(); // 解决表格错位
                                        });
                                    }, 100);
                                } else {
                                    this.loading = false
                                }
                            })
                    },
                    // 重置搜索条件
                    resetDo() {
                        this.form = {
                            gcdm:'',
                            yyjl:'',//营运经理
                            dd:'',//督导
                            status:2,//状态
                            
                        }
                        this.pageIndex = 1
                        setTimeout(() => {
                            this.getListData()
                        }, 0);
                    },
                    // 页码改变
                    handleSizeChange(val) {
                        this.pageIndex = 1
                        this.pagesize = val
                        this.getListData()
                    },
                    handleCurrentChange(val){
                        this.pageIndex = val
                        this.getListData()
                    },
                    exportEx(val) {
                        this.$message({
                            message: '正在导出中,请稍后',
                            type: 'info',
                            duration:5000
                        });
                        if(val == "excel"){
                            let data = this.form
                            let keys = Object.keys(data)
                            let str = "/btyDoubleCard/export?"
                            keys.map((item,index)=>{
                                if(index == 0){
                                    str += item+'='+data[item]
                                }else{
                                    str +=  "&"+item+'='+data[item]
                                }
                            })
                            window.location.href = str
                        }else{
                            let selections = this.selections
                            let ids = []
                            selections.map(item=>{
                                ids.push(item.id)
                            })
                            if(!ids.length){
                                this.$message({
                                    message: '请选择要导出的数据',
                                    type: 'info',
                                    duration:5000
                                }); 
                                return
                            }
                            // let str = "/btyDoubleCard/btnDown?ids="+ids.join(',')
                            // var ajax = new $.ajax(str, function () {
                            //     $("#ways")[0].click();
                            //     this.$message({
                            //         message: '下载成功',
                            //         type: 'success',
                            //         duration:5000
                            //     }); 
                            // }, function (result) {
                            //     this.$message({
                            //         message: '下载失败',
                            //         type: 'success',
                            //         duration:5000
                            //     }); 
                            // });
                            // ajax.start();
                            let str = "/btyDoubleCard/btnDown?ids="+ids.join(',')
                            let formData = new FormData()
                            const requestOptions = {
                                method: "POST",
                                body: formData
                            };
                            fetch(str, requestOptions)
                                .then(response => response.json())
                                .then(res => {
                                    if(res.code == 200){
                                        $("#ways")[0].click();
                                        this.$message({
                                            message: '下载成功',
                                            type: 'success'
                                        }); 
                                    }else{
                                        this.$message({
                                            message: '下载成功',
                                            type: res.message
                                        }); 
                                    }
                                    
                                })
                        }
                    },
                    // 获取图片链接
                    getImgUrl(url){
                        if(!url){
                            return ""
                        }
                        if(url.startsWith('http')){
                            return url
                        }else{
                            return this.imgUrl + url
                        }
                    },
                    // 总催办按钮
                    pressAll(){
                        this.$confirm('确认要催办信息么?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                let formData = new FormData()
                                const requestOptions = {
                                    method: "POST",
                                    body: formData
                                };
                                fetch("/btyDoubleCard/cuiBanAll", requestOptions)
                                    .then(response => response.json())
                                    .then(res => {
                                        if (res.code === 200) {
                                            this.$message({
                                                type: 'success',
                                                message: '催办成功!'
                                            });
                                        } else {
                                            this.$message({
                                                type: 'error',
                                                message: res.message
                                            });
                                        }
                                    })
                                
                            }).catch(() => {});
                    },
                    // 单独催办
                    pressOne(id){
                        this.$confirm('确认要催办信息么?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                let formData = new FormData()
                                formData.append("id",id)
                                const requestOptions = {
                                    method: "POST",
                                    body: formData
                                };
                                fetch("/btyDoubleCard/cuiBan", requestOptions)
                                    .then(response => response.json())
                                    .then(res => {
                                        if (res.code === 200) {
                                            this.$message({
                                                type: 'success',
                                                message: '催办成功!'
                                            });
                                        } else {
                                            this.$message({
                                                type: 'error',
                                                message: res.message
                                            });
                                        }
                                    })
                            }).catch(() => {});
                        
                    },
                    // 多选
                    handleSelectionChange(val){
                        this.selections = val
                    }
                }
            })
        </script>
    </body>
    @}